<template>
  <div class="coupon-client-new views-container">
    <div class="flex-row flex-justify-b">
      <div class="wlm-form" style="flex-grow: 1;margin-right: 20px;">
        <div class="wlm-form-header">小程序卡片</div>
        <div class="wlm-form-content table-content">
          <el-form ref="orther" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="130px" class="retail-form" label-position="right">
            <el-form-item label="消息标题">
              <el-input v-model="formFormatData.formData.title" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="文本">
              <el-input v-model="formFormatData.formData.text" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="小程序链接">
              <el-input v-model="formFormatData.formData.url" placeholder=""></el-input>
              <div class="form-help">小程序链接请手动从[平台=>页面链接]中复制,仅限小程序链接</div>
            </el-form-item>
            <el-form-item label="小程序id">
              <el-input v-model="formFormatData.formData.appid" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="封面图">
              <choose-files ref="chooseFiles" :config="chooseLogoConfig" :changeEvt="formFormatFiltersChange"></choose-files>
              <div class="form-help">建议尺寸500*400，如果不按照此尺寸上传，会造成图片变形！</div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
      <el-button size="small" @click="formFormatSubmit({ router: { type: 'replace', path: '/application/wechartCard', code: 1 }})" type="primary">提交</el-button>
      <router-link tag="span" to="/application/wechartCard">
        <el-button size="small">返回</el-button>
      </router-link>
    </div>
  </div>
</template>

<script>
import {
  sappCardSave,
  sappCardDetail

} from '@/api/application'
import { channelGet } from '@/api/channel'
import ChooseFiles from '@/components/ChooseFiles/index'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'CouponClientNew',
  components: {
    ChooseFiles
  },
  computed: {
  },
  created() {
    channelGet({ type: 'sapp',
      always: true }).then(res => {
      const { data: { data: { channel: { sapp: { AppId: appid = '' } } } } } = res
      this.formFormatData.formData.appid = appid
    })
  },
  data() {
    return {
      chooseLogoConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isLocal: true,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'image',
          model: 'img'
        }
      },
      formFormatData: {
        key: ['orther'],
        api: {
          editForm: {
            api: sappCardDetail,
            params: {
              id: ''
              //   always: true
            },
            filters: {
              img: {
                bindInit: ['chooseLogoConfig']
              }
            }
          },
          submitForm: sappCardSave
        },
        formData: {
          id: '',
          title: '',
          text: '',
          appid: '',
          image: [],
          url: ''
        },
        rules: {}
      }
    }
  },
  mounted() {

  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.coupon-client-new {
  .box-card {
    background-color: #f5f5f5;
    font-size: 14px;
    margin-bottom: 20px;
    color: #606266;
  }
}
</style>
